<template>
    <div>
        <hr />
        <br /><br /><br />
        <div style="float: right;"><el-button
                @click="router.push('/SourceView')">修改基本信息</el-button>&ensp;&ensp;<el-button>导出溯源码</el-button></div>
        <el-row style="margin: 0px auto;">
            <el-col :span="6">
                <img :src="`http://localhost:5124/Images/` + sourceInfo.goodPicture"
                    style="width: 200px;height: 200px;" />
            </el-col>
            <el-col :span="18">
                <el-descriptions :column="2">
                    <template #title>
                        <h2 style="font-weight: 900;">{{ sourceInfo.goodName }}</h2>
                    </template>
                    <el-descriptions-item label="生产批次：">{{ sourceInfo.productionBatch }}</el-descriptions-item>
                    <el-descriptions-item label="保质期：">{{ sourceInfo.shelfLife }}天</el-descriptions-item>
                    <el-descriptions-item label="生产许可证号：">{{ sourceInfo.productionLicenseNumber
                        }}</el-descriptions-item>
                    <el-descriptions-item label="生产企业：">{{ sourceInfo.productionEnterprise }}</el-descriptions-item>
                </el-descriptions>
                <h3 style="font-weight: 600;">产品检验报告</h3>
                <br />
                <el-upload v-model:file-list="fileList" action="http://localhost:5124/api/File/UploadFile"
                    list-type="picture-card" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" :on-success="handleAvatarSuccess">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-col>
        </el-row>
        <br /><br /><br />
        <hr />
        <br /><br />
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
            <el-tab-pane label="养殖信息" name="1">
                <Culture></Culture>
            </el-tab-pane>
            <el-tab-pane label="屠宰信息" name="2">
                <Slaughter></Slaughter>
            </el-tab-pane>
            <el-tab-pane label="深加工信息" name="3">
                <DeepProcessing></DeepProcessing>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { type UploadProps, type UploadUserFile, type TabsPaneContext, ElMessage } from 'element-plus'
import Culture from '@/views/Culture/CultureListView.vue'
import Slaughter from '@/views/Slaughter/SlaughterListView.vue'
import DeepProcessing from '@/views/DeepProcessing/DeepProcessingListView.vue'

import http from '@/http'
const route = useRoute()
const router = useRouter()

//移动菜单列
const activeName = ref('1')


//养殖数据
const sourceInfo = reactive({
    sourceId: 0,
    sourceNo: "2314234214321",
    goodNo: "",
    goodName: "",
    shelfLife: "",
    productionBatch: "",
    productionLicenseNumber: "SC211201027680",
    productionEnterprise: "成都爱吃兔食品加工有限公司",
    goodPicture: "",
    productInspectionReport: "",
    createBy: "张三",
    createDate: "2024-04-02T03:52:02.937Z",
    updateBy: "",
    updateDate: "2024-04-02T03:52:02.937Z",
    isDelete: false
})

//回显养殖数据
const getSourceInfo = (sourceId: number) => {
    http.get("/api/Source/GetSourceInfoById?SourceId=" + sourceId).then(res => {
        sourceInfo.sourceId = res.data.sourceId;
        sourceInfo.sourceId = res.data.sourceId;
        sourceInfo.sourceNo = res.data.sourceNo;
        sourceInfo.goodNo = res.data.goodNo;
        sourceInfo.goodName = res.data.goodName;
        sourceInfo.shelfLife = res.data.shelfLife;
        sourceInfo.productionBatch = res.data.productionBatch;
        sourceInfo.productionLicenseNumber = res.data.productionLicenseNumber;
        sourceInfo.productionEnterprise = res.data.productionEnterprise;
        sourceInfo.goodPicture = res.data.goodPicture;
        sourceInfo.productInspectionReport = res.data.productInspectionReport;
        sourceInfo.createBy = res.data.createBy;
        sourceInfo.createDate = res.data.createDate;
        sourceInfo.updateBy = res.data.updateBy;
        sourceInfo.updateDate = res.data.updateDate;
        sourceInfo.isDelete = res.data.isDelete;
        getPicList()
        //批次号
        sessionStorage.setItem('productionLot', res.data.productionBatch)
    })
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

//产品许可证图片集合
const fileList = ref<UploadUserFile[]>([

])

//显示图片
const getPicList = () => {
    http.get('/api/Source/GetPicture?production=' + sourceInfo.productionBatch).then(res => {
        if (res.data == null) return
        fileList.value = res.data
    })
}

//上传图片
const handleAvatarSuccess = (data: any) => {
    handUpLoad(fileList)
}

//批量操作图片与后台交互的公共方法
const handUpLoad = (list: any) => {
    let str = ''
    list.value.map((x: any) => {
        str += x.name + ','
    })
    str = str.substring(0, str.length - 1)
    let info = {
        production: sourceInfo.productionBatch,
        imgUrls: str,
    }
    http.post(`/api/Source/BatchPic`, info).then()
}

//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    handUpLoad(fileList)
}

//放大图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

// 图片判重
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (fileList.value.findIndex(x => x.name == rawFile.name) != -1) {
        ElMessage({
            type: 'warning',
            message: '该图片已存在！',
            duration: 2000
        });
        return false;
    }
    else {
        return true;
    }
}

//钩子函数
onMounted(() => {
    let sourceId = route.query.sourceId
    getSourceInfo(Number(sourceId))
})
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>